<template>
    <view class="store-cart">
        <u-swipe-action :show="cartItem.show" :index="cartIndex" @click="click" :options="options" @open="open">
            <view class="item  u-border-bottom flex-colum ">
                <view class="flex-row ai-center">
                    <u-checkbox style="width:10s0rpx;" shape="circle" @change="checkedGoodsItem(cartIndex)"
                        v-model="cartItem.checked"> </u-checkbox>
                    <image class="m-10 borderRadius-10" mode="aspectFill" :src="cartItem.images"
                        style="width: 160rpx;flex: 0 0 160rpx;height: 160rpx;" @click="toDetail()" />
                    <view class="title-wrap m-top-10 color-0 size-30 flex-colum jc-between flex-1">
                        <text class="title omit" @click="toDetail()">{{ cartItem.name }}</text>
                        <view class="remarks size-24 color-9 line-height-40 omit"  @click="toDetail()">
                            原料：{{cartItem.remarks}}
                        </view>
                        <view class="remarks size-24 color-9 line-height-40"  @click="toDetail()">
                            方法：{{cartItem.option_type|initoptionType}}
                        </view>
                        <view class="flex-row jc-between size-24 ai-end" style="width: 100%;">
                            <view><text class="font-bold size-28" style="color: #F82727;">￥{{cartItem.price}}</text>
                                <text style="margin:  0 6rpx;color: #666;" class="color-3 size-26 ">/</text>
                                <text class="color-6 size-26"
                                    style="text-decoration: line-through;">￥{{cartItem.market_price}}</text>
                            </view>
                            <u-number-box v-model="cartItem.quantity" @change="valChange($event,cartItem)">
                            </u-number-box>
                        </view>
                    </view>
                </view>
            </view>
        </u-swipe-action>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                        text: '收藏',
                        style: {
                            backgroundColor: '#007aff'
                        }
                    },
                    {
                        text: '删除',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }
                ]
            }
        },
        props: {
            cartIndex: {
                type: Number,
                required: true
            },
            storeCartIndex: {
                type: Number,
                required: true
            }
        },
        computed: {
            cartItem() {
                return this.$store.getters.getCartItem(this.storeCartIndex, this.cartIndex)
            },
        },
        methods: {
            toDetail(){
                if(this.cartItem.type==2){
                    this.$f.jumpUrl('/pagesGoods/goods/detail?id='+this.cartItem.id)
                }else{
                    this.$f.jumpUrl('/pages/article/detail?id='+this.cartItem.id+'&&title='+this.cartItem.name)
                }
            },
            checkedGoodsItem(index) {
                let data = {
                    storeCartIndex: this.storeCartIndex,
                    cartIndex: this.cartIndex
                }
                this.$store.dispatch('setCartItem', data)

            },
            valChange(data, item) {
                let Object = {
                    storeCartIndex: this.storeCartIndex,
                    cartIndex: this.cartIndex,
                    value: data.value
                }
                this.$store.dispatch('setCartItemQuantity', Object)
            },
            click(goodsIndex, index) {
                let data = {
                    storeCartIndex: this.storeCartIndex,
                    cartIndex: this.cartIndex
                }
                if (index == 0) {
                    this.$f.toast('收藏成功')
                } else {
                    this.$f.toast('删除成功')
                    this.$store.dispatch('removeCartItem', data)
                }
            },
            open(index) {
                let data = {
                    storeCartIndex: this.storeCartIndex,
                    cartIndex: this.cartIndex
                }
                this.$store.dispatch('openCartItemSwipeAction', data)
            }
        },
        filters: {
            initoptionType(value) {
                switch (value) {
                    case 1:
                        return '商家备菜'
                    case 2:
                        return '商家制作'
                    case 3:
                        return '原料加工'
                    case 4:
                        return '原料不加工'
                    default:
                        return '无'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .item {
        padding: 0rpx 25rpx 20rpx 25rpx;
    }
</style>
